<h1>Students</h1>
<p>
  This page gives the student details for all your courses. Expand the panels below to view the details of students in each course.
  Use the <a tmRouterLink="/web/instructor/search">'Search' page</a> if you need to locate the details of a specific student by name or email.
</p>
<hr>

<tm-loading-retry [shouldShowRetry]="hasLoadingFailed" [message]="'Failed to load courses'" (retryEvent)="loadCourses()">
  <div *tmIsLoading="isLoadingCourses"></div>
  <ng-container>
    <div class="row mb-3" *ngIf="courseTabList.length > 0">
      <div class="col">
        <div class="float-end">
          <strong class="d-inline"> Sort By: </strong>
          <div class="btn-group" data-toggle="buttons">
            <button id="sort-course-id" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.COURSE_ID)" (click)="sortCourses(SortBy.COURSE_ID)">Course ID</button>
            <button id="sort-course-name" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.COURSE_NAME)" (click)="sortCourses(SortBy.COURSE_NAME)">Course Name</button>
            <button id="sort-course-date" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.COURSE_CREATION_DATE)" (click)="sortCourses(SortBy.COURSE_CREATION_DATE)">Creation Date</button>
          </div>
        </div>
      </div>
    </div>
    <div class="course-table" *ngFor="let courseTab of courseTabList">
      <div class="card">
        <div class="card-header cursor-pointer bg-primary text-white" (click)="toggleCard(courseTab)">
          <strong class="text-break">[{{courseTab.course.courseId}}]: {{courseTab.course.courseName}}</strong>
          <div class="card-header-btn-toolbar">
            <tm-panel-chevron [isExpanded]="courseTab.hasTabExpanded"></tm-panel-chevron>
          </div>
        </div>

        <div *ngIf="courseTab.hasTabExpanded" @collapseAnim>
          <tm-loading-retry [shouldShowRetry]="courseTab.hasLoadingFailed" [message]="'Failed to load students'" (retryEvent)="loadStudents(courseTab)">
            <div *tmIsLoading="!courseTab.hasStudentLoaded">
              <div *ngIf="!courseTab.hasLoadingFailed" class="card-body">
                <ng-container *ngIf="courseTab.hasStudentLoaded && courseTab.stats.numOfStudents > 0, else noStudentsTemplate">
                  <div class="row text-center text-sm-start" *ngIf="courseTab.stats">
                    <div class="col-md-4">
                      <div class="card">
                        <div class="card-body fw-bold fs-5" id="num-students">
                          {{courseTab.stats.numOfStudents}} students
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="card">
                        <div class="card-body fw-bold fs-5" id="num-sections">
                          {{courseTab.stats.numOfSections}} sections
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="card">
                        <div class="card-body fw-bold fs-5" id="num-teams">
                          {{courseTab.stats.numOfTeams}} teams
                        </div>
                      </div>
                    </div>
                  </div>

                  <hr>

                  <a id="btn-enroll" class="btn btn-success"
                      tmRouterLink="/web/instructor/courses/enroll"
                      [queryParams]="{courseid: courseTab.course.courseId}">
                    Enroll Students
                  </a>
                  <br><br>
                  <tm-student-list
                      [courseId]="courseTab.course.courseId"
                      [students]="courseTab.studentList"
                      [tableSortBy]="courseTab.studentSortBy"
                      [tableSortOrder]="courseTab.studentSortOrder"
                      [useGrayHeading]="false"
                      [enableRemindButton]="true"
                      (removeStudentFromCourseEvent)="removeStudentFromCourse(courseTab, $event)">
                  </tm-student-list>
                </ng-container>
              </div>
            </div>
          </tm-loading-retry>
        </div>

        <ng-template #noStudentsTemplate>
          <ng-container *ngIf="courseTab.isAbleToViewStudents, else noViewStudentsPermissionTemplate">
            <h5>There are no students in this course.</h5>
            <a id="btn-enroll" class="btn btn-success"
               tmRouterLink="/web/instructor/courses/enroll"
               [queryParams]="{courseid: courseTab.course.courseId}">
              Enroll Students
            </a>
          </ng-container>
        </ng-template>

        <ng-template #noViewStudentsPermissionTemplate>
          <div class="alert alert-danger" role="alert">
            <h5>You do not have permission to view the details of the students in this course.</h5>
          </div>
        </ng-template>

      </div>
    </div>
  </ng-container>
</tm-loading-retry>
